---
title: 開發與建置
description: '如何開始做一個新專案。'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

一旦你有 Astro 專案，就準備好使用 Astro 打造網站了！🚀

## 編輯專案

要修改專案，請在程式編輯器開啟專案資料夾。在開發模式下有開發伺服器運作，讓你可以看到程式碼修改對網站的更新。

你也可以[自訂開發環境的各方面](#設定開發環境)，例如設定 TypeScript 或安裝官方 Astro 編輯器延伸模組。

### 啟動 Astro 開發伺服器

Astro 附帶內建的開發伺服器，有專案開發所需的所有東西。`astro dev` CLI 指令會啟動本地的開發伺服器，讓你首次看到新網站的實際運作結果。

每個起始模板都帶有預先設定的腳本為你執行 `astro dev`。瀏覽至專案資料夾後，使用你喜歡的套件管理器開始 Astro 開發伺服器吧。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


如果一切順利，Astro 會在 [http://localhost:4321/](http://localhost:4321/) 供應網站。在瀏覽器拜訪那個連結，看看你的新網站吧！

### 使用開發模式

Astro 會監視 `src/` 資料夾內的即時檔案變更，並在你打造網站時更新網站預覽，這樣在開發中做變更時，你就不需要重新啟動伺服器。開發伺服器執行時，你都可以在瀏覽器看到最新版本的網站。

在瀏覽器檢視網站時，你可以存取 [Astro 開發工具列](/zh-tw/guides/dev-toolbar/)。在你打造網站時，它會協助你檢查[群島](/zh-tw/concepts/islands/)、發現無障礙設計問題等等。

如果啟動開發伺服器後，還是不能在瀏覽器開啟專案，請回到執行 `dev` 指令的終端機，檢查上面顯示的訊息。它應該會告訴你有沒有發生錯誤，或是專案是否正在別的網址上供應，而不是在預設的 [http://localhost:4321/](http://localhost:4321/)。

## 建置並預覽網站

要檢查網站在建置時會建立的版本，請停止開發伺服器（<kbd>Ctrl</kbd> + <kbd>C</kbd>），並根據你使用的套件管理器，在終端機上執行對應的建置指令：

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

Astro 會建置可供部署版本的網站在單獨的資料夾（預設在 `dist/`），你可以在終端機查看進度。這會在部署到生產環境前提醒你專案裡的所有建置錯誤。如果 TypeScript 設定為 `strict` 或 `strictest`，`build` 腳本也會檢查專案的型別錯誤。

當建置完成時，在終端機執行合適的 `preview` 指令（如 `npm run preview`），然後你就可以在同一個瀏覽器預覽視窗中，於本地檢視已建置版本的網站。

請注意這預覽的是上次執行建置指令時的程式碼，用意是預覽給你看部署到網路時網站的樣子。任何建置後對程式碼的修改都不會反映在網站預覽上，直到你再次執行建置指令為止。

使用（<kbd>Ctrl</kbd> + <kbd>C</kbd>）來停止預覽並執行別的終端機指令，例如重新啟動開發伺服器以回去[使用開發模式](#使用開發模式)，它會在你編輯時更新以顯示程式碼變更的即時預覽。

<ReadMore>閱讀更多關於 [Astro CLI](/zh-tw/reference/cli-reference/) 還有使用 Astro 打造網站會用到的終端機指令。</ReadMore>

:::tip 
你可能希望[立刻部署新網站](/zh-tw/guides/deploy/)，在你新增或修改太多程式碼之前。這有益於讓最小可運作版本的網站發佈，也能節省多餘的時間和心力在之後對你的部署除錯上。
:::

## 接下來

大功告成！你現在準備好開始使用 Astro 打造網站了！🥳

這邊有幾個頁面是我們推薦後續探索的。你可以照任意順序閱讀，也可以先暫時離開我們的文件，在新的 Astro 專案 codebase 試一下，當你遇到問題或有疑問再回來這邊。

### 設定開發環境

探索下面的指南以自訂你的開發體驗。

<CardGrid>
  <LinkCard
    title="編輯器設定"
    description="自訂你的程式編輯器來改善 Astro 的開發體驗並啟用新功能。"
    href="/zh-tw/editor-setup/"
  />
  <LinkCard
    title="開發工具列"
    description="探索開發工具列的有用功能。"
    href="/zh-tw/guides/dev-toolbar/"
  />
  <LinkCard
    title="TypeScript 設定"
    description="設定用於啟用型別檢查、IntelliSense 等功能的選項。"
    href="/zh-tw/guides/typescript/"
  />
</CardGrid>

### 探索 Astro 的特點

<CardGrid>
  <LinkCard
    title="理解 codebase"
    description="在我們的專案結構指南學習 Astro 的檔案結構。"
    href="/zh-tw/basics/project-structure/"
  />
  <LinkCard
    title="建立內容合集"
    description="透過 frontmatter 驗證與自動型別安全，為新網站加入內容。"
    href="/zh-tw/guides/content-collections/"
  />
    <LinkCard
    title="加入 view transition"
    description="建立流暢的頁面轉場與動畫。"
    href="/zh-tw/guides/view-transitions/"
  />
  <LinkCard
    title="學習群島"
    description="閱讀 Astro 的群島架構介紹。"
    href="/zh-tw/concepts/islands/"
  />
</CardGrid>

### 開始入門教學

在我們的[入門教學](/zh-tw/tutorial/0-introduction/)中，從一個空白頁面開始打造功能完善的 Astro 部落格。

這是了解 Astro 如何運作的好方法，它帶你走過頁面、版面、元件、路由、群島等的基礎。它也包含一個非必須、對初學者友善的單元，適合還不太熟悉網頁開發概念的人，它會引導你在電腦安裝必要的應用程式、建立 GitHub 帳號，並部署你的網站。

